<template>
  <view class="region-picker" v-if="show">
    <view class="mask" @click="hide"></view>
    <view class="picker-content">
      <picker-view 
        :value="pickerValue" 
        @change="pickerChange" 
        class="picker-view"
      >
        <picker-view-column>
          <view class="picker-item" v-for="(item, index) in provinces" :key="index">
            {{item.name}}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="picker-item" v-for="(item, index) in cities" :key="index">
            {{item.name}}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="picker-item" v-for="(item, index) in areas" :key="index">
            {{item.name}}
          </view>
        </picker-view-column>
      </picker-view>
      <view class="picker-toolbar">
        <button class="cancel-btn" @click="hide">取消</button>
        <button class="confirm-btn" @click="confirm">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
import regionData from '@/pages/citys.js' // 地区数据

export default {
  data() {
    return {
      show: false,
      provinces: [],
      cities: [],
      areas: [],
      pickerValue: [0, 0, 0],
      selectedProvince: null,
      selectedCity: null,
      selectedarea: null
    }
  },
  created() {
    this.provinces = regionData
	console.log(this.provinces)
    this.cities = this.provinces[0].children || []
    this.areas = this.cities[0].children || []
  },
  methods: {
    isShow() {
      this.show = true
    },
    hide() {
      this.show = false
    },
    pickerChange(e) {
      const value = e.detail.value
      
      // 省份变化
      if (value[0] !== this.pickerValue[0]) {
        this.cities = this.provinces[value[0]].children || []
        this.areas = this.cities[0].children || []
        this.pickerValue = [value[0], 0, 0]
        return
      }
      
      // 城市变化
      if (value[1] !== this.pickerValue[1]) {
        this.areas = this.cities[value[1]].children || []
        this.pickerValue = [value[0], value[1], 0]
        return
      }
      
      this.pickerValue = value
    },
    confirm() {
      const province = this.provinces[this.pickerValue[0]]
      const city = this.cities[this.pickerValue[1]]
      const area = this.areas[this.pickerValue[2]] || {name: ''}
	console.log(province.name,
        city.name,
        area.name)
      this.$emit('confirm', [
        province.name,
        city.name,
        area.name
      ])
      
      this.hide()
    }
  }
}
</script>

<style>
.region-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.picker-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 500rpx;
  background-color: #fff;
}

.picker-view {
  height: 400rpx;
}

.picker-item {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
}

.picker-toolbar {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
}

.cancel-btn, .confirm-btn {
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 50rpx;
  font-size: 28rpx;
  border-radius: 35rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background-color: #e74c3c;
  color: #fff;
}
</style>